<template>
	<view class="w_container">
		<view :style="{ paddingTop: navBarHeight + 'px' }"></view>
		<custom-navbar :showBack="false" title="钱包" background="#FFFFFF" color="#333333" />

		<!-- 用户信息 -->
		<div class="head_outside">
			<image src="/static/head_pic.png" mode=""></image>
			<view style="display: flex;align-items: center;">
				<text v-if="useStore.nickName">微信用户</text>
				<text style="margin: 0 10rpx;">|</text>
				<button open-type='getPhoneNumber' @getphonenumber='getphonenumberHandle' size="default" type="default"
					v-if='!useStore.phone'>暂未设置</button>
				<text>{{useStore.phone}}</text>
			</view>
		</div>

		<!-- 钱包模块 -->
		<div class="wallet_outside">
			<div class="wallet">
				<view class="money_surplus">
					钱包余额（元）
				</view>

				<view class="money_show">
					<text>￥</text><text>{{moneys}}</text>
				</view>


				<view class="money_btns">
					<view class="btn_item" @click='payHandle'>
						支付
					</view>
					<view class="btn_item" @click="topupHandle">
						充值
					</view>
				</view>
			</div>
		</div>

		<!-- list 35 -->
		<view class="fun_list" v-if="useStore.jugleCode!=10000">
			<view class="item" v-for="(item,i) in funList" :key="i" @click="TipsShow">
				<view class="left">
					<!-- <image style="width: 30rpx; height: 30rpx;padding-right: 8rpx;" :src="item.url" alt="" /> -->
					{{ item.text }}
				</view>
				<image style="width: 11rpx; height: 22rpx" src="../../static/arrow.png" alt="" />
			</view>
		</view>

		<up-modal @confirm='linkToTab' :show="showWarn" title="登录提醒" content='请先前往我的界面完成登录后再进行操作!'></up-modal>
		<up-modal @confirm='linkToPayment' :show="showWarnPay" title="登录提醒" content='请先前往设置支付密码!'></up-modal>

	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/navbar.vue';
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useMyStore
	} from '../../store/index'
	import cellGroup from '../../uni_modules/uview-plus/components/u-cell-group/cellGroup';
	import {TipsShow} from "../../utils/common.js"
	
	const navBarHeight = ref(getApp().globalData.navBarHeight);
	const moneys = ref(26800.70)
	const funList = ref([{
			// url: '../../static/2_bill_history.png',
			text: '账单记录',

		},
		{
			// url: '../../static/2_wallet.png',
			text: '卡包',

		},
		{
			// url: '../../static/2_pay_set.png',
			text: '支付密码设置',

		}
	]);


	const topupHandle = () => {
		console.log('充值');
		uni.navigateTo({
			url: '/pageA/topUp/topUp'
		});
	}
	const payHandle = () => {
		showWarnPay.value = true
	}
	const showWarn = ref(false)
	const showWarnPay = ref(false)
	const useStore = useMyStore();

	const linkToTab = () => {
		showWarn.value = false
		uni.switchTab({
			url: "/pages/profile/profile"
		})
	}

	const linkToPayment = () => {
		showWarnPay.value = false
		uni.navigateTo({
			url: "/pageA/payment/payment"
		})
	}

	const getphonenumberHandle = (e) => {
		console.log('e', e)
	}

	onShow(() => {
		// if (!useStore.openid) {
		// 	showWarn.value = true
		// }
	})
</script>

<style lang="scss" scoped>
	.w_container {
		min-height: 100vh;
		background: #ffffff;

		// 用户信息
		.head_outside {
			display: flex;
			font-family: PingFang SC, PingFang SC;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #555555;
			padding: 48rpx 48rpx 0;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 12rpx;
			}

			button {
				color: #555555;
				// font-size: 16rpx;
				line-height: unset;
				padding: 0;
				background: transparent;
			}

			button::after {
				border: none;
				outline: none;
			}
		}

		//钱包模块
		.wallet_outside {
			padding: 36rpx 25rpx 28rpx;

			.wallet {
				padding: 44rpx 48rpx 36rpx;
				background: linear-gradient(262deg, #F2882A 0%, #F8AA54 100%);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.money_surplus {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.money_show {
					margin: 22rpx 0 27rpx 0;

					text:first-child {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}

					text:nth-child(2) {
						font-family: Arial, Arial;
						font-weight: bold;
						font-size: 54rpx;
						color: #FFFFFF;
					}
				}

				.money_btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.btn_item {
						width: 157rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 4rpx 0rpx #EB8123;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						text-align: center;
						font-size: 24rpx;
						color: #F0882C;
					}

					.btn_item:first-child {
						margin-right: 20rpx;
					}
				}
			}
		}


		.fun_list {
			padding: 0 36rpx;

			.item {

				// border: 2rpx solid yellowgreen;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 12rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F2F2F2;

				.left {
					display: flex;
					align-items: center;
				}
			}

		}
	}
</style>